<template>
    <view class="container">
        <view class="u-demo-block">
            <view class="touView">
                <u-avatar class="tv-img1" :src="user.userPhoto" size="80"></u-avatar>
                <view class="tv-view1">{{user.userName}}</view>
                <view class="tv-view2">{{user.userLevel}}</view>
            </view>
            <view class="orderView">
                <u-grid
                        :border="false"
                        col="4"
                >
                    <u-grid-item
                            v-for="(listItem,listIndex) in girdList"
                            :key="listIndex" @click="view1Click(listItem)"
                    >
                        <u-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="listItem.name"
                                :size="22"
                        ></u-icon>
                        <text class="grid-text">{{listItem.title}}</text>
                    </u-grid-item>
                </u-grid>
                <u-toast ref="uToast" />
            </view>
            <view class="orderView2">
                <u-grid
                        :border="false"
                        col="4"
                >
                    <u-grid-item
                            v-for="(listItem,listIndex) in girdList2"
                            :key="listIndex" @click="view2Click(listItem)"
                    >
                        <u-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="listItem.name"
                                :size="22"
                        ></u-icon>
                        <text class="grid-text">{{listItem.title}}</text>
                    </u-grid-item>
                </u-grid>
                <u-toast ref="uToast" />
            </view>
        </view>
        <!--底部导航杠-->
        <u-tabbar
                    class="footbar"
                    :value="value1"
                    :fixed="false"
                    :placeholder="false"
                    :safeAreaInsetBottom="false"
            >
            <u-tabbar-item text="首页" icon="home"  @click="barToPage('/')" ></u-tabbar-item>
            <u-tabbar-item text="分类" icon="list" @click="barToPage('/pages/sjh/goodsSort')" ></u-tabbar-item>
            <u-tabbar-item text="购物车" icon="shopping-cart" @click="barToPage('/pages/sjh/shoppingCart')" ></u-tabbar-item>
            <u-tabbar-item text="我的" icon="account" @click="barToPage('/pages/sjh/own')" ></u-tabbar-item>
        </u-tabbar>
    </view>
</template>
<script>
    import Request from '../../utils/request'
    export default {
        data() {
            return{
                user:{},
                value1:3,
                userId:1,
                girdList: [
                    {
                        name: 'rmb-circle',
                        title: '待付款'
                    },
                    {
                        name: 'clock',
                        title: '待发货'
                    },
                    {
                        name: 'car',
                        title: '待收货'
                    },
                    {
                        name: 'chat',
                        title: '待评价'
                    },
                ],
                girdList2: [
                    {
                        name: 'map',
                        title: '收货地址'
                    },
                    {
                        name: 'coupon',
                        title: '优惠券'
                    },
                    {
                        name: 'star',
                        title: '商品收藏'
                    },
                    {
                        name: 'kefu-ermai',
                        title: '官方客服'
                    },
                ],
            }
        },
        created(){
            this.getUser()
        },
        methods:{
            /*底部导航跳转页面*/
            barToPage(url,val){
                console.log(url)
                uni.navigateTo({
                    url: url
                });
            },
            /*获取用户*/
            getUser(){
                Request.request('management-mall/user/userOneById'
                    ,{id:this.userId},'post').then(res=>{
                    console.log(res)
                    if(res.success){
                        this.user=res.data.one
                    }
                }).catch(error=>{
                    console.error(error)
                })
            },

            /*按钮点击*/
            view1Click(item){
                if(item.title=="待付款"){
                    uni.setStorageSync("current",0)
                    uni.navigateTo({
                        url: '/pages/sjh/orderRecord'
                    });
                }else if(item.title=="待发货"){
                    uni.setStorageSync("current",1)
                    uni.navigateTo({
                        url: '/pages/sjh/orderRecord'
                    });
                }else if(item.title=="待收货"){
                    uni.setStorageSync("current",2)
                    uni.navigateTo({
                        url: '/pages/sjh/orderRecord'
                    });
                }else if(item.title=="待评价"){
                    uni.setStorageSync("current",3)
                    uni.navigateTo({
                        url: '/pages/sjh/orderRecord'
                    });
                }
            },
            view2Click(item){
                if(item.title=="收货地址"){
                    uni.navigateTo({
                        url: '/pages/sjh/mail'
                    });
                }
            }
        }
    }
</script>

<style>
    .container {
        padding-bottom: 60px;
        font-size: 14px;
        line-height: 24px;
    }
    .footbar{
        margin: 0;
        width: 360px;
        position: fixed;
        bottom: 0;
    }
    .touView{
        border-radius: 10px;
        margin: 10px 5%;
        position: relative;
        width: 90%;
        height: 120px;
        background: rgba(55,28,125,0.6);
    }
    .tv-img1{
        top:18px;
        left:20px;
        position: absolute;
    }
    .tv-view1{
        top:40px;
        left:120px;
        position: absolute;
        font-size: 30px;
    }
    .tv-view2{
        top:75px;
        left:132px;
        position: absolute;

    }
    .orderView{
        background: #d3dce6;
        padding: 10px 5px;
        margin-top: 15px;
    }
    .orderView2{
        background: #9d9d9d;
        padding: 10px 5px;
        margin-top: 25px;
    }
</style>
